<template>
  <div class="Videolist-wrap">
    <!--    {{ $store.state.num }}-->
    <!--    测试数据{{ test }}-->
    <!--    v-if="show" :token="token"-->
    <top-bar ref="topBar"></top-bar>
    <!--    评论滚动-->
    <div class="comment-container">
      <!--      <ul class="components-list">-->
      <!--        &lt;!&ndash; 这里是评论内容的列表 &ndash;&gt;-->
      <!--        <li v-for="(item,index) in plList" :key="index">{{ item }}</li>-->
      <!--      </ul>-->
    </div>
    <swiper :options="swiperOption">
      <!-- 幻灯内容 -->
      <swiper-slide v-for="(item, index) in videoList" :key="index">
        <div>
          <videos ref="videos" :videoList="item" :index="index"></videos>
        </div>
      </swiper-slide>
    </swiper>
    <div class="infobar-wrap">
      <info-bar ref="infoBar"></info-bar>
      <right-bar
        ref="rightBar"
        @send-message="handleMessage"
        :myArray="plList"
      ></right-bar>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import InfoBar from "./InfoBar";
import RightBar from "./RightBar";
import videos from "./Videos";
import TopBar from "./TopBar";
import { mapState } from "vuex";
import { addAuthorLike, addVisit } from "../../api/share";

export default {
  name: "videoList",
  computed: {
    ...mapState("share", ["videoList"]),
  },
  // watch: {
  //   videoList: {
  //     handler(newVal, oldVal) {
  //       // this.$store.commit("share/UPDATE_VIDES_LIST", this.id);
  //       this.$nextTick(() => {
  //         this.$forceUpdate();
  //       });
  //     },
  //   },
  // },
  data() {
    return {
      show: false,
      token: "",
      page: 1,
      test: 0,
      plList: ["养生真的很重要，我每天早上都会喝一杯温水"],
      swiperOption: {
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,
        on: {
          tap: () => {
            this.playAction(this.page - 1);
          },
          // 下滑结束
          slideNextTransitionStart: () => {
            this.page += 1;
            this.nextVideo(this.page - 1);
          },
          // 上滑结束
          slidePrevTransitionEnd: () => {
            if (this.page > 1) {
              this.page -= 1;
              this.preVideo(this.page - 1);
              console.log(this.page);
            }
          },
        },
      },
      // videoList: [
      //   {VideoUrl: 'http://192.168.110.105:9035/'},
      //   {VideoUrl: 'https://qckjvideo.oss-cn-beijing.aliyuncs.com/uploads/20230804/d0d2f96e485cfe26d6da540911866d0a.mp4'},
      // ]
    };
  },
  components: {
    TopBar,
    Swiper,
    SwiperSlide,
    videos,
    InfoBar,
    RightBar,
  },
  async mounted() {
    // this.token = this.getParam('token') ? decodeURI(this.getParam('token')) : '';
    // if (this.token) {
    //   this.show = true
    //   // this.$refs.topBar.setToken({token: this.token})
    // }
    // this.id = this.getParam('id') ? this.getParam('id') : '';
    this.id = this.$route.query.id;
    console.log("打印父组件id", this.id);
    this.$store.commit("share/SET_VODIE_ID", this.id);
  },
  methods: {
    async getChannelList() {
      let data = {
        subscribe: 0,
        token: this.$store.state.token,
      };
      // channelList(data).then((res) => {
      //   this.channels = res.data
      // })
      await this.$store.dispatch("share/getChannelLlist", data);
    },
    // 获取参数
    getParam(name) {
      if (window.location.hash.indexOf("?") != -1) {
        const query = window.location.hash.split("?")[1];
        const vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
      } else {
        return "";
      }
    },
    callRightBarMethod() {
      // 通过 $refs 引用 right-bar 组件实例
      const rightBarComponent = this.$refs.rightBar;

      // 调用 right-bar 组件的方法
      rightBarComponent.toggleComment();
    },
    handleMessage(param) {
      this.plList.push(param);
      console.log("打印评论内容数组", this.plList);
    },
    playAction(index) {
      this.$refs.videos[index].playOrStop();
    },
    // 滑动到下一个视频
    async nextVideo(index) {
      //全局设置下一个视频并调用播放量接口
      console.log("下滑视频index", index);
      if (index % 9 == 0) {
        console.log("current+=1");
        await this.$refs.topBar.init();
      }
      console.log("下滑视频index", this.videoList[index]);
      await this.$store.dispatch("share/setVideoItem", this.videoList[index]);
      let data = {
        id: this.videoList[index].id,
        token: this.token,
      };
      console.log("打印data", data);
      await addVisit(data).then((res) => {
        if (res.code == 0) {
          console.log("该视频播放量+1");
        }
      });
      this.$refs.videos[index - 1].stop();
      this.$refs.videos[index].play();
    },

    // 滑动到上一个视频
    preVideo(index) {
      this.$refs.videos[index + 1].stop();
      this.$refs.videos[index].play();
    },
  },
};
</script>

<style lang="less" scoped>
.Videolist-wrap {
  background-color: #000;
  color: #ffffff;
  overflow: hidden;

  .comment-container {
    height: 100px; /* 设置容器的高度 */
    overflow: hidden; /* 溢出内容隐藏 */
    position: fixed;
    top: 50px;
    z-index: 99;
  }

  .comment-list {
    white-space: nowrap;
    list-style: none; /* 去除列表项的默认样式 */
    //animation: scroll 10s linear infinite; /* 应用滚动动画 */
    animation: scroll 10s linear infinite;

    &::after {
      content: attr(data-text);
      margin-left: 50px;
    }
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
}

/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
  font-size: 1.5em;
  /*   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

/deep/ .video-js {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
